import { Shape } from '@antv/x6'
import { marked } from 'marked'
import "./styles/marknode.scss"
import "./styles/resizeController.css"
import { CustomResizeController } from './resizeController'
import EditableNodeController from './editableNodeController'
import { renderContent } from './bizUtIl'


/**
 * 测量内容div的实际尺寸
 * @param {HTMLElement} contentDiv - 内容容器
 * @returns {Object} - {width, height}
 */
function measureContentSize(contentDiv) {
  // 确保元素在DOM中且可见
  if (!contentDiv || !contentDiv.offsetParent) {
    console.warn('contentDiv不可见或未挂载到DOM')
    return { width: 450, height: 120 } // 默认尺寸
  }

  // 方法1: 使用getBoundingClientRect（推荐）
  const rect = contentDiv.getBoundingClientRect()
  let width = Math.ceil(rect.width)
  let height = Math.ceil(rect.height)

  // 方法2: 使用scrollWidth/scrollHeight（备选）
  if (width === 0 || height === 0) {
    width = contentDiv.scrollWidth
    height = contentDiv.scrollHeight
  }

  // 方法3: 使用offsetWidth/offsetHeight（兜底）
  if (width === 0 || height === 0) {
    width = contentDiv.offsetWidth
    height = contentDiv.offsetHeight
  }

  // 添加padding和border的补偿
  const computedStyle = window.getComputedStyle(contentDiv)
  const paddingX = parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight)
  const paddingY = parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom)

  return {
    width: Math.max(width + paddingX, 100), // 最小宽度100
    height: Math.max(height + paddingY, 60)  // 最小高度60
  }

}


/**
 * 更新节点尺寸
 * @param {Cell} cell - X6节点实例
 * @param {number} width - 新宽度
 * @param {number} height - 新高度
 */
function updateCellSize(cell, width, height) {
  // 设置尺寸限制
  const minWidth = 100
  const maxWidth = 800
  const minHeight = 60
  const maxHeight = 600

  // 应用限制
  const finalWidth = Math.max(minWidth, Math.min(width, maxWidth))
  const finalHeight = Math.max(minHeight, Math.min(height, maxHeight))

  // 方法1: 使用setProp方法设置size（推荐）
  try {
    cell.setProp('size', { width: finalWidth, height: finalHeight })
    console.log('使用setProp方法成功设置尺寸')
  } catch (propError) {
    console.warn('setProp方法失败，尝试resize:', propError)

    // 方法2: 使用resize方法（备选）
    try {
      cell.resize(finalWidth, finalHeight)
      console.log('使用resize方法成功设置尺寸')
    } catch (error) {
      console.warn('resize方法失败，尝试直接设置属性:', error)

      // 方法3: 直接设置属性（兜底）
      cell.prop('size/width', finalWidth)
      cell.prop('size/height', finalHeight)
      console.log('使用prop方法设置尺寸')
    }
  }

  console.log('节点尺寸更新:', {
    nodeId: cell.id,
    originalSize: { width, height },
    finalSize: { width: finalWidth, height: finalHeight }
  })
}


// 添加setHtml方法
function addSetHtmlMethod(cell, contentDiv) {
  if (!cell.data.setHtml) {

    cell.data.setHtml = (content, isMarkdown = true) => {
      // 更新数据
      const newData = {
        ...cell.getData(),
        content: content,
        isHtml: !isMarkdown
      }
      cell.setData(newData)

      // 直接更新DOM（性能优化）
      renderContent(contentDiv, content, !isMarkdown)

    }

    cell.setData(cell.data)

  }
}

/**
 * 注册自定义节点类型
 * 包括 Markdown 节点和富文本节点的注册逻辑
 */
export function registerCustomNodes() {
  // 配置marked选项
  marked.setOptions({
    breaks: true,
    gfm: true,
    sanitize: false
  })

  // 注册Markdown节点
  Shape.HTML.register({
    shape: 'markdown-node',
    width: 300,
    height: 250,
    effect: ['data'],
    resizing: true,
    // 添加连接点配置
    ports: {
      groups: {
        'connection-port': {
          position: 'absolute',
          attrs: {
            circle: {
              r: 6,
              magnet: true,
              stroke: '#5F95FF',
              strokeWidth: 2,
              fill: '#fff',
              style: {
                visibility: 'hidden'
              }
            }
          }
        }
      },
      items: [
        { id: 'top', group: 'connection-port', args: { x: '50%', y: 0 } },
        { id: 'right', group: 'connection-port', args: { x: '100%', y: '50%' } },
        { id: 'bottom', group: 'connection-port', args: { x: '50%', y: '100%' } },
        { id: 'left', group: 'connection-port', args: { x: 0, y: '50%' } }
      ]
    },
    html(cell) {
      console.log("🚀 ~  节点的 ~ html 方法:", cell)


      const data = cell.getData() || {}
      const content = data.content || '空内容'

      // 创建容器
      const container = document.createElement('div')
      container.className = 'markdown-node-container'
      container.style.position = 'relative'
      container.style.width = '100%'
      container.style.height = '100%'



      // 创建标题容器
      const titleContainer = document.createElement('div')
      titleContainer.className = 'title-container'
      titleContainer.contentEditable = true
      titleContainer.style.cssText = 'position: sticky; background: #fff; top: 0px; z-index: 2000; left: 0px; border-bottom: 1px solid #ddd; padding: 10px;'
      titleContainer.textContent = data.title || '未命名节点'

      // 创建内容div
      const div = document.createElement('div')
      div.className = 'markdown-node-content'
      div.contentEditable = true
      div.style.display = cell?.data?.isCollapsed ? 'none' : 'block'


      // 渲染内容
      renderContent(div, content, false)


      // 组装容器
      container.appendChild(titleContainer)
      container.appendChild(div)






      //注册方法
      // 添加setHtml方法到节点实例
      addSetHtmlMethod(cell, div)


      //设置 resize controller
      // 创建自定义resize控制器
      if (!cell?._customResizeController) {
        const resizeController = new CustomResizeController(cell, container)
        // 将控制器实例保存到cell上，便于后续访问
        cell._customResizeController = resizeController

        // 添加鼠标悬停事件来显示/隐藏拖拽点
        container.addEventListener('mouseenter', () => {
          resizeController.showHandles()
        })

        container.addEventListener('mouseleave', () => {
          // setTimeout(() => {
          //   resizeController.hideHandles()
          // }, 500)
        })
      }


      // 加入 edit 编辑模型
      if (!cell?._editableController) {
        var _graph = undefined
        const editableController = new EditableNodeController(_graph, cell, container, div)
        // 将控制器实例保存到cell上，方便后续访问
        cell._editableController = editableController

        // 监听节点移除事件，清理编辑控制器
        cell.on('removed', () => {
          console.log("🚀 ~ html ~ removed:",)
          if (cell._editableController) {
            cell._editableController.destroy()
            cell._editableController = null
          }
        })

        // const _dblclickFunc = (e) => {
        //   // 检查是否在拖拽点上
        //   if (e.target.closest('.resize-handle')) return
        //   // 检查是否在编辑状态
        //   if (this.isEditing) return
        //   e.preventDefault()
        //   e.stopPropagation()
        //   this.enterEditMode()
        // }

        // container?.removeEventListener('dblclick',_dblclickFunc).addEventListener('dblclick',_dblclickFunc)

      }




      // 设置 新增一个title-container 数据获取使用 cell.data.title
      // css     position: sticky; background: #fff;top: 0px; z-index: 2000; left: 0px;  border-bottom: 1px solid #ddd;  padding: 10px;

      return container
    },




  })

}